<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加商品</title>
</head>
<body>
<div>
    <h1>添加商品</h1>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>商品名:<input type="text" name="name"></p>
        <p>
            一级分类:
            <select name="category1" onchange="changecate(this)">
                {% for foo in type_list1 %}
                    <option value="{{ foo.id }}">{{ foo.name }}</option>
                {% endfor %}
            </select>

            二级分类:
            <select name="category" id="cate2">
                {% for foo in type_list2 %}
                    <option value="{{ foo.id }}">{{ foo.name }}</option>
                {% endfor %}
            </select>

        </p>
        <p>标签:<select name="tag" id="tags">
            <option value="">无</option>
            {% for foo in tag_list %}
                <option value="{{ foo.id }}">{{ foo.name }}</option>
            {% endfor %}


        </select>
        </p>

        <p>图片:
            <input type="file" name="pic">
        </p>

        <p>价格:<input type="text" name="price"></p>
        <p>库存:<input type="text" name="store"></p>
        <div>详情:
            <textarea name="content"></textarea>
        </div>
        <div>包装:
            <textarea name="baozhuang"></textarea>
        </div>
        <div>售后服务:
            <textarea name="fuwu"></textarea>
        </div>

        <hr>
        <p>添加商品属性</p>
        <div>
            <p>属性名:<input type="text" name="pname"> 属性值:<input type="text" name="pvalue"></p>
            <p>属性名:<input type="text" name="pname"> 属性值:<input type="text" name="pvalue"></p>
            <p>属性名:<input type="text" name="pname"> 属性值:<input type="text" name="pvalue"></p>
        </div>

        <p>
            <input type="submit" value="添加">
        </p>
    </form>

</div>
<script src="/static/admin/js/axios-0.19.2.min.js"></script>
<script src="/static/admin/js/jquery-1.12.4.min.js"></script>
<script>

    function changecate(select) {

        //获取 一级分类的id
        const cid1 = select.value
        // 一级分类下的 二级分类    一级分类下的 标签
        axios.get("/aaa/cate_and_tag?cid=" + cid1).then(resp => {
            console.log(resp.data)

            //获取到了数据   然后 手动 把数据渲染到 网页上
            const cate_list2 = resp.data.cate_list2

            const tag_list = resp.data.tag_list

            //$("#cate2") 表示 选中了 二级分类 select

            $("#cate2").empty()  //情况 select 标签 原有的 option子元素
            $("#tags").empty()
            for (let i = 0; i < cate_list2.length; i++) {
                //给 select 添加 option子元素
                $("#cate2").append("<option value=" + cate_list2[i].id + ">" + cate_list2[i].name + "</option>")
            }

            for (let i = 0; i < tag_list.length; i++) {
                //$("#tags").append("<option value=" + tag_list[i].id + ">" + tag_list[i].name + "</option>")
                const option=document.createElement("option") //创建出一个option标签对象
                option.value=tag_list[i].id //赋值 value值
                option.innerText=tag_list[i].name //标签对之间的文本
                $("#tags").append(option)
            }


        }).catch(error => {
            console.log(error)
        })
    }

</script>
</body>
</html>